<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件3</title>
    <link rel="stylesheet" type="text/css" href="../class6/style.css">
	<script src="../class6/vue.js"></script>
</head>
<body>
    <div id="app">
        <div style="float: left;">
            <h2>自定义的下拉框</h2>
            <custom-select btn="查询" v-bind:list="list1"></custom-select>
        </div>
        <div style="float:left;">
            <h2>自定义的下拉框2</h2>
            <custom-select btn="搜索" v-bind:list="list2"></custom-select>
        </div>
    </div>
    <script>
    /*var obj = {
                selectShow:false
            }*/
        Vue.component("custom-select",{
            data:function(){
                return {
                    selectShow:false,
                    val:""
                };
            },
            props:["btn","list"],
            template:`<section class="warp">
                <div class="searchIpt clearFix">
                    <div class="clearFix">
                        <input type="text" class="keyWord" :value="val" @click="selectShow = !selectShow" />
                        <input type="button" :value="btn">
                        <span></span>
                    </div>
                    <custom-list 
                        v-show="selectShow" 
                        :list="list"
                        v-on:receive="changeValueHandle"
                    ></custom-list>
                </div>
            </section>`,
            methods:{
                changeValueHandle(value){
                    this.val = value;
                }
            }
        })
        Vue.component("custom-list",{
            props:["list"],
            template:`<ul class="list">
                        <li v-for="item of list" @click="selectValueHandle(item)">{{item}}</li>
                    </ul>`,
            methods:{
                selectValueHandle:function(item){

                    this.$emit("receive",item);
                }
            }
        })		

        new Vue({
            el:"#app",
            data:{
                list1:["北京","上海","杭州"],
                list2:["17-02-17","17-02-18","17-02-19"]
            }
        });
    </script>
</body>
</html>